<template>
  <div class="app-container">
    <bread parentPathText="巡查管理" currentPathText="巡查人员管理"/>
    <el-form :model="queryParams" :inline="true" label-width="68px">
      <el-form-item label="网格筛选">
        <el-select
          v-model="queryParams.gridVal"
          placeholder="选择网格"
          size="small"
          style="width: 260px"
          @change="getSelectList(queryParams.gridVal, 5)"
        >
          <el-option
            v-for="item in gridData"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="组别">
        <el-select
          v-model="queryParams.groupVal"
          placeholder="选择组别"
          size="small"
          style="width: 260px"
          @change="getSelectList(queryParams.gridVal, 2)"
        >
          <el-option
            v-for="item in groupData"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="巡查区域">
        <el-select
          v-model="queryParams.inspectUserRegion"
          placeholder="选择区域"
          clearable
          size="small"
          style="width: 260px"
        >
          <el-option
            v-for="item in regionData"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="筛选类型">
        <el-select
          v-model="queryParams.type"
          placeholder="选择类型"
          clearable
          size="small"
          style="width: 260px"
        >
          <el-option
            v-for="item in types"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="queryParams.info"
          placeholder="请输入姓名/电话"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <div class="addItem">
        <el-button
        type="primary"
        size="mini"
        @click="handleDownLoad"
        >巡查楼栋二维码下载</el-button>
       <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >新增</el-button>
    </div>
    <el-table v-loading="loading" :data="tableList">
      <el-table-column
        align="center"
        label="巡查员姓名"
        prop="userName"
        :show-overflow-tooltip="true"
        min-width="15%"
      />
      <el-table-column
        align="center"
        label="电话"
        prop="tel"
        :show-overflow-tooltip="true"
        min-width="20%"
      />
      <el-table-column
        align="center"
        label="巡查区域"
        prop="inspectUserRegionStr"
        min-width="20%"
      />
      <el-table-column
        align="center"
        label="所属网格"
        prop="gridStr"
        min-width="30%"
      />
      <el-table-column
        align="center"
        label="添加日期"
        prop="createTime"
        min-width="15%"
      />
      <el-table-column
        align="center"
        label="操作"
        min-width="25%"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加/编辑弹框 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="30%"
      append-to-body
      :before-close="handleClose"
      ref="ruleForm"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
      >
        <el-form-item label="姓名" prop="name">
          <el-input v-model="ruleForm.name" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="phone">
          <el-input
            v-model="ruleForm.phone"
            placeholder="请输入手机号码"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否户主" prop="houseHolder">
          <el-select v-model="ruleForm.houseHolder" @change="houseHolderChange">
            <el-option
              v-for="item in houseHolderData"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="选择户主" prop="houseHolderId" v-if="showHouseHolder">
          <el-select v-model="ruleForm.houseHolderId" @change="houseHolderIdChange">
            <el-option
              v-for="item in houseHolderIdData"
              :key="item.id"
              :label="item.userName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属网格" prop="gridSection">
          <el-select
            v-model="ruleForm.gridSection"
            @change="getSelectList(ruleForm.gridSection, 3)"
          >
            <el-option
              v-for="item in gridData"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="组别" prop="groupVal">
          <el-select v-model="ruleForm.groupVal" @change="popGroupValChange">
            <el-option
              v-for="item in popGroupData"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="巡查区域" prop="inspectUserRegion">
          <el-select multiple v-model="ruleForm.inspectUserRegion">
            <el-option 
              v-for="item in regionData"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="小组长" prop="leader">
          <el-input v-model="ruleForm.leader" disabled />
        </el-form-item>
        <!-- <el-form-item label="微网格名" prop="miniGrid">
          <el-select v-model="ruleForm.miniGrid">
            <el-option
              v-for="item in popMiniGridData"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('ruleForm')"
          >确定</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </div>
    </el-dialog>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      class="pagination"
    >
    </el-pagination>
  </div>
</template>
<script>
import initPagin from '../mixins/index.js';
export default {
  mixins:[initPagin],
  data() {
    return {
      queryParams: {
        gridVal: "",
        groupVal: "",
        type: "",
        inspectUserRegion:'',
        info: "",
      },
      gridData: [],
      groupData: [],
      types: [
        {
          label: "全部",
          value: 0,
        },
        {
          label: "姓名",
          value: 1,
        },
        {
          label: "电话",
          value: 2,
        },
      ],
      loading: false,
      // 弹框
      title: "添加",
      dialogVisible: false,
      showHouseHolder:false,
      ruleForm: {
        name: "",
        phone: "",
        inspectUserRegion: "",
        gridSection: "",
        groupVal: "",
        leader: "",
        // miniGrid: "",
        houseHolder:'',
        houseHolderId:''
      },
      houseHolderData:[
        {
          label: "是",
          value: 1,
        },
        {
          label: "否",
          value: 0,
        },
      ],
      houseHolderIdData:[],
      rules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        phone: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          {
            min: 11,
            max: 11,
            message: "请输入11位手机号码",
            trigger: "change",
          },
          {
            pattern:
              /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
            message: "请输入正确的手机号码",
          },
        ],
        community: [
          {
            required: true,
            message: "请选择巡查区域",
            trigger: "change",
          },
        ],
        gridSection: [
          {
            required: true,
            message: "请选择所属网格",
            trigger: "change",
          },
        ],
        houseHolder: [
          {
            required: true,
            message: "请选择是否户主",
            trigger: "change",
          },
        ],
        houseHolderId: [
          {
            required: true,
            message: "请选择户主",
            trigger: "change",
          },
        ],
        groupVal: [
          {
            required: true,
            message: "请选择组别",
            trigger: "change",
          },
        ],
        inspectUserRegion: [
          {
            required: true,
            message: "请选择巡查区域",
            trigger: "change",
          },
        ],
      },
      popGroupData:[],
      popMiniGridData:[],
      regionData:[],
      time: new Date().getTime(),
      id: "", // 当前id
    };
  },
  mounted() {
    this.getList();
    //this.getAreaList(); // 获取小区
    this.getSelectList(0, 1); // 获取微网格名、组名
  },
  methods: {
    // 搜索按钮操作
    handleQuery() {
      this.pageNum = 1;
      this.getList();
    },
    // 重置按钮操作
    resetQuery() {
      Object.keys(this.queryParams).forEach((key) => {
        this.queryParams[key] = "";
      });
    },
    // 获取列表
    getList() {
      this.loading = true;
      let params = {
        time: this.time,
        grid: this.queryParams.gridVal,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        status: this.queryParams.type,
        queryMsg: this.queryParams.info,
        miniGrid:this.queryParams.inspectUserRegion,
        inspectUserFlag: 1,
      };
      let result = this.$md5.transferValue(params);
      this.axios
        .post(this.stateUrl.inspect.getUserList, {
          time: this.time,
          grid: this.queryParams.gridVal,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          miniGrid:this.queryParams.inspectUserRegion,
          inspectUserFlag: 1,
          status: this.queryParams.type,
          queryMsg: this.queryParams.info,
          sign: this.$md5.val(result),
        })
        .then((res) => {
          this.loading = false;
          this.tableList = res.data.data.list;
          this.total = res.data.data.total;
        })
        .catch(() => {});
    },
    // 获取微网格名、组名
    getSelectList(parentId, type) {
      let params = {
        time: this.time,
        parentId,
      };
      let url = '';
      if(type == 2){
        url = this.stateUrl.miniGrid.selectList
      }
      else{
        url = this.stateUrl.region.selectList;
      }
      let result = this.$md5.transferValue(params);
      this.axios
        .post(url, {
          time: this.time,
          parentId,
          sign: this.$md5.val(result),
        })
        .then((res) => {
          if (type == 1) {
            this.gridData = res.data.data;
          } else if (type == 2) {
            this.regionData = res.data.data;
          } else if (type == 3) {
            this.ruleForm.groupVal = "";
            this.popGroupData = res.data.data;
            this.ruleForm.leader = "";
            this.ruleForm.miniGrid = "";
          } else if (type == 4) {
            // 编辑
            this.popGroupData = res.data.data;
          }
          else if (type == 5) {
            // 编辑
            this.queryParams.groupVal = '';
            this.groupData = res.data.data;
          }
        })
        .catch(() => {});
    },
    // 获取小区列表
    getAreaList() {
      let params = {
        time: this.time,
      };
      let result = this.$md5.transferValue(params);
      this.axios
        .post(this.stateUrl.region.selectLists, {
          time: this.time,
          sign: this.$md5.val(result),
        })
        .then((res) => {
          this.groupData = res.data.data;
        })
        .catch(() => {});
    },
    handleClose() {
      this.$refs["ruleForm"].resetFields();
      this.dialogVisible = false;
    },
    // 添加
    handleAdd() {
      this.dialogVisible = true;
      this.id = "";
      this.title = "新增巡查人员";
      Object.keys(this.ruleForm).forEach((key) => {
        if(key !='inspectUserRegion'){
          this.ruleForm[key] = "";
        }
        else{
          this.ruleForm[key] = [];
        }
      });
      this.popGroupData = [];
      this.regionData = [];
      this.popMiniGridData = [];
      this.houseHolderIdData = [];
    },
    // 编辑
    handleUpdate(row) {
      this.dialogVisible = true;
      this.title = "编辑巡查人员";
      this.id = row.id;
      let params = {
        time: this.time,
        id: row.id,
      };
      let result = this.$md5.transferValue(params);
      this.axios
        .post(this.stateUrl.villager.getUserInfo, {
          time: this.time,
          id: row.id,
          sign: this.$md5.val(result),
        })
        .then((res) => {
          this.ruleForm.name = res.data.data.userName;
          this.ruleForm.phone = res.data.data.tel;
          this.ruleForm.address = res.data.data.address;

          this.ruleForm.gridSection = res.data.data.grid;
          this.getSelectList(res.data.data.grid, 4);

          this.ruleForm.groupVal = res.data.data.groupId;
          this.getSelectList(res.data.data.groupId,2);
          this.ruleForm.leader = res.data.data.groupAdminName;

          this.ruleForm.inspectUserRegion = res.data.data.inspectUserRegion;
          // this.popMiniGrid(res.data.data.groupId);
          // this.ruleForm.miniGrid = res.data.data.miniGrid;

          if(!res.data.data.houseHolderFlag){
            this.showHouseHolder = true;
            this.ruleForm.houseHolder = 0;
            this.getHouseHolderList();
            this.ruleForm.houseHolderId = res.data.data.houseHolderId;
          }
          else if(res.data.data.houseHolderFlag){
            this.ruleForm.houseHolder = 1;
            this.showHouseHolder = false;
            
          }

        })
        .catch(() => {});      
    },
    // 删除按钮操作
    handleDelete(row) {
      let that = this;
      this.$confirm("是否确认删除?", "提醒", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          that.delRole(row.id);
        })
        .catch(() => {});
    },
    // 删除
    delRole(id) {
      let params = {
        time: this.time,
        id,
      };
      let result = this.$md5.transferValue(params);
      this.axios
        .post(this.stateUrl.inspect.deleteInspectUser, {
          time: this.time,
          id,
          sign: this.$md5.val(result),
        })
        .then((res) => {
          this.msgSuccess("删除成功");
          this.getList();
        })
        .catch(() => {});
    },

    // 选择小区
    areaChange(val) {
      this.queryParams.groupVal = val;
    },
    // 获取小组长,微网格名称
    popGroupValChange(val) {
      let params = {
        time: this.time,
        groupId: val,
      };
      let result = this.$md5.transferValue(params);
      this.axios
        .post(this.stateUrl.region.getUserCadresInfo, {
          time: this.time,
          groupId: val,
          sigin: this.$md5.val(result),
        })
        .then((res) => {
          this.getSelectList(val,2);
          this.ruleForm.leader = res.data.data.groupManage.userName;
        })
        .catch(() => {});
      // this.popMiniGrid(val);
    },
    // 获取微网格名称
    popMiniGrid(val) {
      let params = {
        time: this.time,
        groupId: val,
        communityId: 0,
        grid: this.ruleForm.gridSection,
      };
      let result = this.$md5.transferValue(params);
      this.axios
        .post(this.stateUrl.miniGrid.selectList, {
          time: this.time,
          groupId: val,
          communityId: 0,
          grid: this.ruleForm.gridSection,
          sign: this.$md5.val(result),
        })
        .then((res) => {
          this.popMiniGridData = res.data.data;
        })
        .catch(() => {});
    },
    // 是否为户主
    houseHolderChange(val){
      this.ruleForm.houseHolder = val;
      if(val == 1){
        this.showHouseHolder = false;
      }
      else if(val == 0){
        this.showHouseHolder = true;
        this.getHouseHolderList();
      }
    },
    // 户主列表
    getHouseHolderList(){
      let params = {
        time:this.time,
      }
      let result = this.$md5.transferValue(params);
      this.axios
        .post(this.stateUrl.getHouseHolderSelect, {
          time: this.time,
          sign: this.$md5.val(result),
        })
        .then((res) => {
          this.houseHolderIdData = res.data.data;
        })
        .catch(() => {});
    },
    // 户主ID
    houseHolderIdChange(val){
      this.ruleForm.houseHolderId = val;
    },
    // 提交表单
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let url = "";
          let params = {
            id: this.id,
            houseHolderFlag:this.ruleForm.houseHolder,
            houseHolderId:this.ruleForm.houseHolderId,
            inspectUserFlag:1,
            time: this.time,
            userName: this.ruleForm.name,
            tel: this.ruleForm.phone,
            resideFlag: 0,
            partyFlag: 0,
            grid:this.ruleForm.gridSection,
            groupId:this.ruleForm.groupVal,
            // miniGrid: this.ruleForm.miniGrid,
            inspectUserRegion:this.ruleForm.inspectUserRegion.join(","),
            miniGrid: 0,
          };
          let result = this.$md5.transferValue(params);
          if (!this.id) {
            url = this.stateUrl.villager.addUser;
          } else {
            url = this.stateUrl.villager.updateUser;
          }
          this.axios
            .post(url, {
              id: this.id,
              houseHolderFlag:this.ruleForm.houseHolder,
              houseHolderId:this.ruleForm.houseHolderId,
              inspectUserFlag:1,
              time: this.time,
              userName: this.ruleForm.name,
              tel: this.ruleForm.phone,
              resideFlag: 0,
              partyFlag: 0,
              grid:this.ruleForm.gridSection,
              groupId:this.ruleForm.groupVal,
              inspectUserRegion:this.ruleForm.inspectUserRegion.join(","),
              //miniGrid: this.ruleForm.miniGrid,
              miniGrid: 0,
              sign: this.$md5.val(result),
            })
            .then((res) => {
              if (this.id) {
                this.msgSuccess("编辑成功");
              } else {
                this.msgSuccess("添加成功");
              }
              this.$refs[formName].resetFields();
              this.dialogVisible = false;
              this.getList();
            })
            .catch(() => {});
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleDownLoad(){
      if(process.env.NODE_ENV == 'development'){
        location.href = 'http://192.168.1.112:10001/api/miniGrid/miniGridQr'
      }
      else if(process.env.NODE_ENV == 'production'){
        location.href = `http://web.sanfengcun.com/api/miniGrid/miniGridQr`
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>
<style lang="less" scoped>
</style>